<template>
	<view class="container">
		<image class="top-bg-img" src="/static/solver-task/top-bg.png"></image>
		<view class="user-box">
			<up-cell :title="null" :value="null">
				<template #icon>
					<up-avatar :src="userAvatar" size="56"></up-avatar>
				</template>
				<template #title>
					<view class="title-box">
						<view class="title-box-top">
							<u-text bold color="rgba(0, 0, 0, 1)" size="18" :text="'用户1'"></u-text>
						</view>
						<view class="title-box-bottom">
							<view v-for="(item, index) in tagList" :key="`tag-${index}`" class="tag-box">
								<u-text :text="item.text"></u-text>
							</view>
						</view>
					</view>
				</template>
			</up-cell>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useUserStore } from '@/store/modules/user.ts';
defineOptions({
	name: 'SolverTaskIndex'
});

const userStore = useUserStore();


const userAvatar = ref('https://cdn.uviewui.com/uview/album/1.jpg');

type tagListType = {
	text: string;
}
const tagList = ref<tagListType[]>([])
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #f6f6f6;
	padding-top: 10px;
	box-sizing: border-box;
}

.top-bg-img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 20%;
	display: inline-block;
}
.user-box {
	position: relative;
	z-index: 10;
}
.title-box-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
</style>
